import React from 'react'
import { ListMenuType } from 'utils/enums'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm, Tabs } from 'antd'
import { List, Page } from 'components'
import queryString from 'query-string'
import Modal from './Modal'

const TabPane = Tabs.TabPane
const Notices = ({ location, dispatch, notices, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination, currentItem, modalVisible, modalType, selectedRowKeys } = notices
  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['basicData/update'],
    title: `${modalType === 'create' ? 'Create' : 'Update'}`,
    wrapClassName: 'vertical-center-modal',
    onOk () {
      dispatch({
        type: 'notices/hideModal',
      })
    },
    onCancel () {
      dispatch({
        type: 'notices/hideModal',
      })
    },
  }
  const unreadList = list.filter((current) => {
    return !current.readed
  })
  const readList = list.filter((current) => {
    return current.readed
  })
  const listProps = {
    menuType: 0,
    noOperation: true,
    loading: loading.effects['notices/list'],
    pagination,
    location,
    columnsData: [
      {
        title: 'Title',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: 'createTime',
        dataIndex: 'createTime',
        key: 'createTime',
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onClikDetail (item) {
      dispatch({
        type: 'notices/showModal',
        payload: {
          modalType: 'check',
          currentItem: item,
        },
      })
    },
    onRowDoubleClick (record) {
      dispatch({
        type: 'notices/showModal',
        payload: {
          modalType: 'check',
          currentItem: record,
        },
      })
    },
  }

  return (
    <Page inner>
      <Tabs defaultActiveKey="1">
        <TabPane tab="unread" key="1">
          <List {...listProps} dataSource={unreadList}/>
        </TabPane>
        <TabPane tab="read" key="2">
          <List {...listProps} dataSource={readList}/>
        </TabPane>
      </Tabs>
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

Notices.propTypes = {
  notices: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ notices, loading }) => ({ notices, loading }))(Notices)
